<template>
	<view>
		<view class="p-navbar" :class="{ white, border }" :style="{ background, zIndex }">
      <!-- 状态栏高度 -->
      <view class="navbar-statusbar"></view>
      <view class="navbar-inner">
				<slot name="inner">
					<view v-if="show" class="navbar-back" @tap="back"></view>
					<view class="navbar-title u-line-1">{{ title }}</view>
					<view class="navbar-menu">
						<slot></slot>
					</view>
				</slot>
        
      </view>
      <!-- 解决fixed定位后导航栏塌陷的问题 -->
    </view>
    <view class="navbar-placeholder" v-if="placeholder"></view>
	</view>
</template>
<script>
export default {
  props: {
	  show:{
		  type:Boolean,
		  default:true,
	  },
		// 导航栏标题
    title: {
      type: String
    },
		// 是否显示白色标题
		white: {
			type: Boolean,
			default: false
		},
		// 是否显示下边框
		border: {
			type: Boolean,
			default: false
		},
		// 背景色
		background: {
			type: String,
			default: '#F5F5F5'
		},
		// z-index 值
		zIndex: {
			type: [String, Number],
			default: 999
		},
		// 是否出现占位节点
		placeholder: {
			type: Boolean,
			default: true
		}
  },
  methods:{
	  back(){
		 this.$Router.back(1)
	  },
  }
}
</script>

<style lang="scss">
.p-navbar {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
	background-color: $color-white;
	box-sizing: border-box;
	&.white {
		background-color: transparent;
		.navbar-back {
			background-image: url("~@/static/icon-back-black.png");
		}
	  .navbar-title {
			color: $color-white;
		}
	} 
	&.border {
		border-bottom: 2rpx solid $border-color-base;
	}
}
.navbar-statusbar {
  width: 100%;
  height: var(--status-bar-height);
}
.navbar-placeholder {
  width: 100%;
  height: calc(#{$navbar-height} + var(--status-bar-height));
}
.navbar-inner {
  @include flex;
  justify-content: space-between;
  height: $navbar-height;
	padding: 0 30rpx;
  position: relative;
  .navbar-back {
    width: 24rpx;
    height: 40rpx;
		background-image: url("~@/static/icon-back-black.png");
    @include background;
    z-index: 1;
		@include click;
  }
  .navbar-title {
    font-size: 32rpx;
    text-align: center;
    position: absolute;
    left: 50%;
		transform: translateX(-50%);
		width: 50%;
  }
  .navbar-menu {
    position: relative;
    z-index: 1;
		transition: opacity .1s;
		@include click;
    // font-size: 24rpx;
    // padding-bottom: 2rpx;
    // border-bottom: 1rpx solid $color-white;
  }
}
</style>
